<template>
  <div>
    <div class="div">
      <div class="circular"></div>
      <div class="circular"></div>
      <div class="circular"></div>
      <div class="circular"></div>
      <div class="imgwrap">
        <img src="../../assets/img/login.png" alt="" />
        <div class="con">
          <img src="../../assets/img/orange.png" alt="" />
          <p>优 质 甄 选 · 高 枕 无 忧</p>
          <el-input placeholder="请输入内容" v-model="form.username" clearable>
          </el-input>
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            show-password
          ></el-input>
          <el-button type="primary" plain @click="submit">提交</el-button>
        </div>
      </div>
    </div>
    {{user}}
  </div>
</template>

<script>
import { userLogin } from "../../request/api";
import { mapActions, mapGetters } from "vuex";
import { successAlert, warningAlert } from "../../utils/alert";
export default {
  data() {
    return {
      form: {
        username:"",
        password:""
      },
    };
  },
  methods: {
    ...mapActions({
      asyncChangeUser: "asyncChangeUser",
    }),
    submit() {
      // if(this.user.name=="123"&&this.user.pass=="123"){
      //     this.$router.push("/index")
      // }else{
      //     alert("输入错误")
      //     this.reset()
      // }
      userLogin(this.form).then((res) => {
        console.log(res.data.list);
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          //登录成功 将用户信息存储到状态层 
          this.asyncChangeUser(res.data.list)
          //跳转到首页
          this.$router.push("/index")
        } else {
          warningAlert(res.data.msg);
        }
      });
    },
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  mounted() {
    // this.asyncChangeUser();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.div {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #e2674e;
  position: relative;
  overflow: auto;
}
.circular {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(#de5f46, #f39582);
}
.circular:nth-child(2) {
  top: 60%;
  left: 10%;
}
.circular:nth-child(3) {
  top: 60%;
  left: 70%;
}
.circular:nth-child(4) {
  top: 20%;
  left: 85%;
}
.imgwrap {
  width: 800px;
  /* height: 80%; */
  position: absolute;
  top: 10%;
  left: 20%;
}
.imgwrap img {
  width: 100%;
  height: 100%;
}
.con {
  width: 40%;
  position: absolute;
  top: 15%;
  right: 10%;
}
.con img {
  width: 100%;
  margin-bottom: 20%;
}
.con p {
  margin-bottom: 20%;
  text-align: center;
  font-size: 18px;
  color: #ccc;
}
.con .el-input {
  margin-bottom: 6%;
}
.con button {
  width: 100%;
  height: 40px;
  font: 18px/40px 微软雅黑;
}
</style>